<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <span>{{message}}</span>
  <span>{{message2}}</span>
</div>

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> //只会渲染数组中最后一个被浏览器支持的值

// css 过度 和动画
 Vue 提供了<transition name=""></transition>组件
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
在进入/离开的过渡中，会有 6 个 class 切换。
transitionName-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
transitionName-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
transitionName-enter-to: 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
transitionName-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
transitionName-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
transitionName-leave-to:  定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。


<script>

  //v-once 一次性插值 <span v-once>{{msg}}</span>
  //v-html 输出html <div v-html="html"></div>
  //v-bin 绑定标签属性 <div v-bind:id="dynamicId"></div> 可使用js表达式  ： 用于接收参数，  缩写：
  //v-if 根据值的真假 插入/移动 元素/  v-else-if/ v-else //key 管理可复用的元素  key唯一将不再复用（未指定key仍会复用）
  //v-show 相比 v-if v-show切换元素的css（display属性）
  //v-for 循环  （<li v-for="(item, index) in items"> 拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
      //
  //v-on 监听事件 缩写@  (访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法)
  //v-model 实现表单控件上的数据双向绑定

  //全局组件
  Vue.component("全局组件名",{
    //props 接收父组件传递的参数
    model:{""}
    props:['父组件参数'] //父子组件间的通信
    template:'<p>{{父组件参数}}</p>'
  } ) //<全局组件名 v-bind:父组件参数="传递的变量"></>
  //$emit(eventName)触发事件
  //<comp :foo.sync="bar"></comp> .sync子组件更新foo值时， 父组件状态也会改变
  //非父子组件的通信
    var bus = new Vue()
    // 触发组件 A 中的事件
    bus.$emit('id-selected', 1)
    // 在组件 B 创建的钩子中监听事件
    bus.$on('id-selected', function (id) {
      // ...
    })

  //自定义全局指令
  Vue.directive('指令名',{
      指令函数提供的钩子函数:function(el){
        //el 元素， 执行操作
      }
  })

  //一、指令函数提供钩子函数
//    bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
//    inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
//    update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
//    componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
//    unbind: 只调用一次， 指令与元素解绑时调用。
//    二、钩子函数的参数有：
//      1.el: 指令所绑定的元素，DOM 。
//      2.binding: 一个对象，包含以下属性：
//          name: 指令名，不包括 v- 前缀。
//          value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
//          oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
//          expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
//          arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
//          modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
//      3.vnode: Vue 编译生成的虚拟节点。
//      4.oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

  var vm = new Vue({
    el:"#app", // === document.getElementById(“app”) 获取 标签
    data:{ //数据  vm 会代理data中的属性， vm.message === message
      message:"hello"
    },
    computed:{  //计算属性
      computedMsg:{
           //getter
          get : function(){ //默认get属性
             return this.message+"计算属性"
          },
          //setter
          set : function(value){

          }
        }
    },
    methods:{  //方法
      computedMg: function(){
         //方法
        /**
         *  相比 计算属性相比， 属性基于缓存， 只有message改变才会重新计算， 方法引用几次计算几次
         */
      }
    },
    watch:{ //监听属性 （在数据变化时执行异步或开销较大的操作时）
        message: function(){
          //message 变化时 触发此方法
        }
    },
    components:{  // 声明局部组件
      '局部组件名':'<p>局部组件内容</p>'
    },
    directive:{ //自定义局部指令

    },

    //生命周期函数
    beforecreate: function(){  //加一个loading事件
      //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    },
    created:function(){  //结束loading， 还做一些初始化， 实现函数自执行
      //在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
    },
    mounted:function(){  发起后端请求，
      //el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
    },
    beforeUpdate:function(){
      // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前
    },
    updated:function(){
        //由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新
    },
    beforeDestroy:function(){
      //实例销毁之前调用。在这一步，实例仍然完全可用
    },
    destroyed:function(){
      //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
    },
    nextTick:function(){
      //更新数据后立即操作dom
    }
  });
  vm.message = 'world';
  vm.message2 = 'world';



  var
</script>
</body>
</html>
